﻿@{
    ViewData["Title"] = "首页";
}
@section Style { 
  <style>
        .classify a {
            color: black;
        }

        .divstoa div {
            height:28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size:15px;
        }

        .el-select .el-input {
            width: 72px;
        }

        .el-input {
            width: 280px;
        }

        /* 搜索框 */
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }

        .recoDiv a{
            text-decoration: none;
            color: black;
            font-size:15px;
        }

        .recoDiv a:hover {
            text-decoration: underline;
            color: red;
        }

        /* card组件样式 */
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .el-card__body{
            background-color: white;
            padding:0px !important;
            height:260px;
            font-size:15px;
        }

        .input-box .el-col-5{
            max-width: 20%;
            flex: 0 0 20%;
        }

        .elCardInfo span {
            font-weight: bold;
        }

        /* 走马灯样式 */
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        /* 分页按钮样式 */
        .el-pagination.is-background .el-pager li:not(.disabled) {
            /* background-color: silver; */
            /* 进行修改未选中背景和字体  color: #fff; */
        }

        .el-pagination.is-background .el-pager li:not(.disabled).active {
            /* background-color: green; */
            /* 进行修改选中项背景和字体 color: #fff; */
        }

        #recommandKnowledge a {
            text-decoration: none;
            color: black;
        }

        #recommandKnowledge a:hover {
            text-decoration:none;
            color: red;
        }
</style>
}
<div style="width:1020px;margin:auto;height:100%;">
    <div style="margin-top:9px;height:100px;">
        <a href='@ViewData["bannerAdvertUrl"]' target="_blank" @@click="advertClickHandle(@ViewData["bannerAdvertID"])"><img src='@ViewData["bannerAdvertImg"]' style="width:1020px; height:100px;" /></a>
</div>
 <div style="margin-top:9px;height:300px;background-color:#f8f8f8;">
     <div style="width:600px;float: left; ">
        <template>
                <el-carousel :interval="3000" arrow="always">
                    <el-carousel-item v-for="item in petStoryCarousel">
                        <a :href="item.navurl" target="_blank" :title="item.title"><img :src='item.src' style="width:600px; height:300px;" alt="图片不存在" /></a>
                </el-carousel-item>
            </el-carousel>
        </template>
    </div>
        <div style="float: left;">
            <div style="color:red;line-height:30px;margin-top:10px;font-size:18px;text-align:left;padding-left:20px;font-weight:bold;font-style:italic;">推荐故事</div>
         <div><hr style="background-color:lightgray;height:1px; border:none;" /></div>
         <div class="recoDiv" v-for="item in recommendStory">
                <div style="text-align:left;margin-left:26px;margin-top:12px;;font-size:17px;"><a :href="item.navurl" target="_blank" style="word-wrap:break-word;">{{item.title}}</a></div>
          </div>
    </div>
</div>
    <div style='background-color:red; height:2px; width:100%;position: absolute;left:0px;margin-top:12px;'></div>
    <div class="classify" style="margin-top:26px;background-color:#f5f5f5; width:100%;position: absolute;left:0px;">
        <div style="width:1020px;margin:auto;">
            <div class="divstoa">
                <div style="float: left; margin-left:5px;"><a @@click.prevent="screenHandle" id="searchAll" data-id="searchAll" data-num="0" href="#">全部</a></div>
                <div style="float: left; margin-left:20px;"><a @@click.prevent="screenHandle" id="searchDog" data-id="searchDog" data-num="2" href="#">犬类</a></div>
                <div style="float: left; margin-left:20px;"><a @@click.prevent="screenHandle" id="searchCat" data-id="searchCat" data-num="1" href="#">猫咪</a></div>
                <div style="float: left; margin-left:20px;"><a @@click.prevent="screenHandle" id="searchReptile" data-id="searchReptile" data-num="4" href="#">爬行</a></div>
                <div style="float: left; margin-left:20px;"><a @@click.prevent="screenHandle" id="searchWater" data-id="searchWater" data-num="5" href="#">水族</a></div>
                <div style="float: left; margin-left:20px;"><a @@click.prevent="screenHandle" id="searchOther" data-id="searchOther" data-num="3" href="#">其他</a></div>
            </div>
            <div style="text-align: right;">
                <el-input placeholder="请输入品种搜索" v-model.trim="searchInput" class="input-with-select" size="mini">
                    <el-button slot="append" icon="el-icon-search" @@click="searchHandle"></el-button>
                </el-input>
            </div>
        </div>
</div>
<div style="margin-top:68px;">
        <el-row style="margin-top:15px;background-color:white;" :gutter="15" class="input-box">
            <el-col :span="6" v-for="(co, indexCo) in petInfo">
                <el-card style="box-shadow:none;">
                    <a :href="co.navurl" target="_blank" title="点击查看详细信息"><img :src="co.src" style="width:100%;height:166px;"></a>
                <div style="padding: 0px; text-align:left;" class="elCardInfo">
                        <div><span>名字：</span>{{co.nickname}}</div>
                        <div><span>品种：</span>{{co.breed}}</div>
                        <div><span>价格：</span>{{co.price}}</div>
                        <div><span>绝育&疫苗：</span>{{co.sterstatus}}&{{co.vaccinstatus}}</div>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>
    <div class="block" style="margin-top:18px;margin-bottom:20px;">
    <el-pagination @@size-change="handleSizeChange"
    @@current-change="handleCurrentChange"
                       :current-page.sync="currentPageNum"
                       :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    background
                       :total="petInfoCount">
    </el-pagination>
</div>
 <div style='background-color:lightgray; height:1px; width:100%;position: absolute;left:0px;'></div>
    <div class="classify" style="background-color:#f5f5f5; width:100%;position: absolute;left:0px;margin-top:1px;">
        <div style="width:1020px;margin:auto;height:34px;font-weight:bold;text-align:center;line-height: 34px;" id="recommandKnowledgeDiv">
        推荐知识
    </div>
</div>
    <div style="margin-top:54px;width:1020px;">
        <div id="recommandKnowledge" style="width:700px;float:left;min-height:200px;"></div>
        <div id="advertDiv" style="height:258px;width:320px;background-color:silver;float:left;margin-top:20px;">
            <div style="background-color:#f5f5f5;color:gray;font-size:13px;">广告</div>
            <a href='@ViewData["blockAdvertUrl"]' target="_blank" @@click="advertClickHandle(@ViewData["blockAdvertID"])"><img src='@ViewData["blockAdvertImg"]' style="width:320px; height:240px;" /></a>
        </div>
     <div style="clear:both;"></div>
</div>
    <div style="margin-top:20px;height:30px;width:1020px;background-color:#f5f5f5;justify-content: center;display:flex;">
        <a id="addMorePetKnowledge" @@click.prevent="appendKnowledgeHandle()" href="#" style="color:red;margin:auto;">加载更多</a>
        <span id="toTheEnd" style="color:gray;display:none;margin:auto;">已经到底了~</span>
</div>
<div id="hideDiv" style="display:none;">隐藏div</div>
</div>
@section Scripts {
<script type="text/javascript">
    $("#firstPage").css("color", "red");
    $("#searchAll").css("color", "red");

    $(document).scroll(function () {
            var recTop = $("#recommandKnowledgeDiv").offset().top;
        var scroH = $(document).scrollTop();//滚动高度
        if (scroH > recTop) {
            $('#advertDiv').css({
                'position': 'fixed',
                'top': '40px',
                'margin-left': '700px'
            });
        }
        else {
            $('#advertDiv').css({
                'position': '',
                'top': '',
                'margin-left': ''
            });
        }
    });

    var app = new Vue({
        el: "#app",
            mounted: async function () {
            let that = this;//将vue对象的引用保存在that中

            //获取养宠知识
            await  that.appendKnowledgeHandle(that);

            $("#app").show();//vue渲染完后显示界面
        },
        methods: {
            //广告点击
                advertClickHandle(val){
                    axios.post('../Home/AdvertClick', {
                        "advertID": val
                    }).then(response => {
                        console.log(response.data);
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
                },
            //追加养宠知识
               async appendKnowledgeHandle(obj) {

                if (obj === null || obj === undefined)
                    obj = app;

               await  axios.post('../Home/RaisingPetKnowledge_Partial', {
                        "lastRecommandKnowledgeID": obj.lastRecommandKnowledgeID
                    }).then(response => {
                        $("#hideDiv").append(response.data);
                        var batchDivHeight = parseInt($("#hideDiv #batchDiv").attr("tag"));
                        var batchDataCount = parseInt($("#hideDiv #batchDiv").attr("datacount"));

                        if (batchDivHeight > 0) {
                            $("#recommandKnowledge").height($("#recommandKnowledge").height() + batchDivHeight);
                            $("#recommandKnowledge").append(response.data);
                            obj.lastRecommandKnowledgeID = parseInt($("#hideDiv #batchDiv").attr("lastid"));
                        }

                        if (batchDataCount < obj.perBatchCount) {
                            $("#addMorePetKnowledge").hide();
                            $("#toTheEnd").show();
                        }

                        $("#hideDiv").empty();
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
            },
            //搜索
            searchHandle() {
                if (app.searchInput.length > 20) {
                    this.$message.warning('搜索内容不能超过20个字符');
                    return;
                }

                //搜索品种
                axios.post('../Home/SearchBreed', {
                        "breedName": app.searchInput,
                        "specialsNum": app.currentSpecialsNum,
                }).then(response => {
                        app.petInfo = response.data.data;
                        app.rowCount = Math.ceil(app.petInfo.length / app.colCount);
                        app.lastColCount = app.petInfo.length - ((app.rowCount - 1) * app.colCount);

                        app.petInfoCount = response.data.dataCount;
                        app.currentPageNum = 1;
                }, error => {
                    alert("错误提示：" + error.message);
                });
            },
            //分页
            handleCurrentChange(val) {
                axios.post('../Home/GetPaginationInfo', {
                    "pageNum": val,
                        "specialsNum": app.currentSpecialsNum,
                        "breedName": app.searchInput,
                }).then(response => {
                        app.petInfo = response.data.data;
                        app.petInfoCount = response.data.dataCount;
                }, error => {
                    alert("错误提示：" + error.message);
                });
            },
            //种类筛选
            screenHandle(e) {
                var elid = e.currentTarget.dataset.id;
                var num = e.currentTarget.dataset.num;
                $(".divstoa > div > a").css("color", "black");
                $("#" + elid).css("color", "red");

                app.searchInput = '';
                app.currentSpecialsNum = num;

                axios.post('../Home/ScreenSpecials', {
                        "specialsNum": num,
                }).then(response => {
                    app.petInfo = response.data.data;
                    app.petInfoCount = response.data.dataCount;
                    app.currentPageNum = 1;
                }, error => {
                    alert("错误提示：" + error.message);
                });
            }
        },
        data() {
            return {
                searchInput: '',
                recommendStory: @Html.Raw(ViewData["recommendStory"]),
                petStoryCarousel: @Html.Raw(ViewData["petStoryCarousel"]),
                petInfo: @Html.Raw(ViewData["petInfo"]),

                //分页设置
                petInfoCount: @Html.Raw(ViewData["petInfoCount"]),
                currentPageNum:1,
                pageSize: @Html.Raw(ViewData["pageSize"]),

                currentSpecialsNum:0,
                recommandKnowledgeArray:[],
                lastRecommandKnowledgeID:-1,
                perBatchCount: @Html.Raw(ViewData["perBatchCount"]),
            }
        }
    });
</script>
}